<script setup lang="ts" name="finance">
import {ref, onMounted, reactive} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from "vue-router";
import { useFinanceApi } from "/src/api/finance";

import MainColumns from "/@/components/common/main-columns.vue";
import MainHeader from "/@/components/common/main-header.vue";

const router = useRouter();
const route = useRoute();
const lxsAppData = reactive({
	tab: {
		type: ref(0),
		secondName: ref('')
	},
	tips: {
		content: ''
	},
	userInfo: {},
	tableData: {
		data: [],
		loading: false,
		param: {
			page: 1,
			page_size: 5
		}
	},
	platformData: [
		{name: '提现', path: '/finance'},
		{name: '提现记录', path: '/finance/record'},
		{name: '收益明细', path: '/finance/income'},
	],
})

// 左侧平台点击
const platformDataClick = (index) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

// 提现
const withdrawClick = () => {
	if ( lxsAppData.userInfo.amount < 100 ) {
		lxsAppData.tips.content = '可提现金额小于100元'
		setTimeout(function () {
			lxsAppData.tips.content = ''
		}, 1500);
		return;
	}

	if ( lxsAppData.userInfo.user_authentication == null ) {
		ElMessageBox.confirm(
			'为了保障您的账户安全需要先进行实名认证',
			{
				confirmButtonClass: 'el-button--orange',
				confirmButtonText: '去认证',
				showCancelButton: false,
				center: true,
			}
		).then(() => {
			router.push({
				path: '/mine'
			})
		}).catch(() => {

		})
		return;
	}

	if ( lxsAppData.userInfo.user_bank == null ) {
		ElMessageBox.confirm(
			'需要先绑定提现收款账户',
			{
				confirmButtonClass: 'el-button--orange',
				confirmButtonText: '去填写',
				showCancelButton: false,
				center: true,
			}
		).then(() => {
			router.push({
				path: '/mine/payee_account'
			})
		}).catch(() => {

		})
		return;
	}

	router.push({
		path: '/finance/withdrawal_application'
	})
}

// 获取页面数据
const getPageData = async () => {
	lxsAppData.tableData.loading = true;
	const res = await useFinanceApi().getWithdrawData(lxsAppData.tableData.param);
	setTimeout(() => {
		lxsAppData.tableData.loading = false;
	}, 500);
	console.log('获取财务提现页面数据', res.data);
	lxsAppData.userInfo = res.data.user_info;
	lxsAppData.tableData.data = res.data.lists.data;
}

onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
	getPageData();
});
</script>

<template>
	<div class="layout-container flex">

		<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

		<div class="layout-main">

			<MainHeader :second-name="lxsAppData.tab.secondName"/>

			<div class="main-content">

				<el-card shadow="hover" class="layout-padding-auto">

					<div class="finance-top">
						<div class="tips-box" v-show="lxsAppData.tips.content">
							<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E6%8F%90%E7%A4%BA.png" alt="">
							<text>{{ lxsAppData.tips.content }}</text>
						</div>
						<div class="finance-top-box">
							<div class="finance-top-box-left">
								<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/finance/%E9%92%B1%E5%8C%85.png" alt="">
								<div class="finance-top-box-left-column">
									<p>可提现金额（元）</p>
									<span>{{ lxsAppData.userInfo.amount }}</span>
								</div>
							</div>
							<div class="finance-top-box-right">
								<p>单次提现金额需大于100元</p>
								<span @click="withdrawClick">申请提现</span>
								<p>每月15日平台陆续处理提现申请，如遇上节假日将顺延，敬请理解</p>
							</div>
						</div>
					</div>

					<div class="finance-table">
						<div class="lxs-title">
							<div class="lxs-title-text">提现记录</div>
							<span class="lxs-title-tips">*此处仅展示近三个月的提现记录，详细情况请查看明细表</span>
						</div>
						<div class="lxs-table">
							<el-table
								:data="lxsAppData.tableData.data"
								v-loading="lxsAppData.tableData.loading"
								size="small"
								:header-cell-style="{backgroundColor: '#EEF1F5', color: '#010101'}"
								highlight-current-row
								style="width: 100%"
                                empty-text="暂无记录"
							>
								<el-table-column prop="order_info" label="收款人" show-overflow-tooltip max-width="90">
									<template #default="scope">
										<span>{{ scope.row.order_info?.payee }}</span>
									</template>
								</el-table-column>
								<el-table-column prop="order_info" label="收款账号" show-overflow-tooltip max-width="150">
									<template #default="scope">
										<span>{{ scope.row.order_info?.account }}</span>
									</template>
								</el-table-column>
								<el-table-column prop="type_value" label="收款方式" show-overflow-tooltip max-width="90"></el-table-column>
								<el-table-column prop="amount" label="提现金额" show-overflow-tooltip max-width="90"></el-table-column>
								<el-table-column prop="status" label="状态" show-overflow-tooltip max-width="90">
									<template #default="scope">
										<el-tag v-if="scope.row.status == 1">已申请</el-tag>
										<el-tag type="danger" v-else-if="scope.row.status == 2">失败</el-tag>
										<el-tag type="success" v-else-if="scope.row.status == 3">已完成</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="create_time" label="申请时间" show-overflow-tooltip max-width="150"></el-table-column>
							</el-table>
						</div>
					</div>

					<div class="finance-table">
						<div class="lxs-title">
							<div class="lxs-title-text">提现须知</div>
						</div>
						<div class="finance-bottom">
							<el-image :src="lxsAppData.userInfo.withdraw_rules"></el-image>
						</div>
					</div>

				</el-card>

			</div>

		</div>

	</div>
</template>

<style scoped lang="scss">
@media screen and (max-width: 700px) {
	.finance-top {
		width: 100% !important;
	}
	.finance-top-box-left {
		img {
			width: 32px !important;
			height: 31px !important;
		}
		p {
			font-size: 12px !important;
		}
	}
	.finance-top-box-right {
		font-size: 12px !important;
		padding-left: 15px !important;

		span {
			width: 84px !important;
			height: 32px !important;
			line-height: 32px !important;
		}
	}
	.finance-table {
		.lxs-title {
			.lxs-title-text {
				font-size: 14px !important;
			}
		}
	}
}
.finance-top {
	width: 95%;
	height: 148px;
	background-image: url("https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/finance/%E8%83%8C%E6%99%AF.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: grid;
	place-items: center;
	margin: 0 auto;
	position: relative;

	.tips-box {
		display: flex;
		align-items: center;
		padding: 10px 20px;
		background: #FFEBE9;
		border-radius: 8px 0px 8px 0px;
		position: absolute;
		top: 0;
		left: 0;

		img {
			width: 14px;
			height: 14px;
		}
		text {
			font-size: 12px;
			color: #FF6C63;
			text-indent: 5px;
		}
	}

	.finance-top-box {
		width: 96%;
		height: 114px;
		display: flex;
		align-items: center;

		.finance-top-box-left {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;

			img {
				width: 43px;
				height: 42px;
			}

			.finance-top-box-left-column {
				margin-left: 10px;

				p {
					color: #6B2D00;
				}

				span {
					font-weight: bold;
					font-size: 22px;
					color: #FF6600;
				}
			}
		}

		.finance-top-box-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			padding-left: 100px;
			font-size: 13px;

			p {
				margin: 8px 0;
				color: #665549;
			}

			span {
				width: 165px;
				height: 37px;
				color: #FFFFFF;
				background: #FC661C;
				border-radius: 5px 5px 5px 5px;
				text-align: center;
				line-height: 37px;
				cursor: pointer;
				transform: scale(1.1);
				transition: transform 0.3s ease-in-out;
			}

			span:hover {
				transform: translate(2px, 1px) scale(1.2);
			}

			p:nth-child(3) {
				color: #998D81;
			}
		}
	}
}


.finance-table {
	margin-top: 30px;

	.lxs-title {
		display: flex;
		align-items: center;

		.lxs-title-text {
			min-width: 105px;
			background-image: url("https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/finance/Group_52.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			font-size: 16px;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 1.2rem;
		}

	}

	.lxs-title-tips {
		font-size: 12px;
		color: #666666;
		text-align: left;
		margin-left: 10px;
	}
	.lxs-table {
		margin-top: 12px;
	}

	.finance-bottom {
		margin-top: 12px;

		p {
			font-size: 13px;
			color: #333333;
			line-height: 22px;
		}

		.el-image {
			min-height: 270px;
		}
	}
}
</style>